<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3实现平滑效果</title>
    <meta name="viewport" content="width=decvice-width,initial-scale=1">
    <link href="css/normalize.css" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css">
</head>
<body>
    
<div class="container">
        <!--nav-->
        <div class="st-container">
            <input type="radio" name="radio-set" checked="checked" id="st-control-1">
            <a href="#st-panel-1">Serendipity</a>
            <input type="radio" name="radio-set"  id="st-control-2">
            <a href="#st-panel-2">Serendipity</a>
            <input type="radio" name="radio-set"  id="st-control-3">
            <a href="#st-panel-3">Serendipity</a>
            <input type="radio" name="radio-set"  id="st-control-4">
            <a href="#st-panel-4">Serendipity</a>
            <input type="radio" name="radio-set"  id="st-control-5">
            <a href="#st-panel-5">Serendipity</a>             
    <!--main-->
    <div class="st-scroll">
        <section class="st-panel" id="st-panel-1">
            <div class="st-desc" data-icon="H"></div>
            <h2>Serendipity</h2>
            <p>I am happy to join with you today in what will go down in 
                history as the greatest demonstration for freedom in the
                 history of our nation.</p>                 
        </section>
        <section class="st-panel st-color" id="st-panel-2">
            <div class="st-desc" data-icon="2"></div>
            <h2>Dream</h2>
            <p>But one hundred years later, the Negro still is not free.
                 One hundred years later, the life of the Negro is still
                  sadly crippled by the manacles of segregation and the
                   chains of discrimination.</p>                 
        </section>
        <section class="st-panel" id="st-panel-3">
            <div class="st-desc" data-icon="B"></div>
            <h2>PHP</h2>
            <p>But we refuse to believe that the bank of justice is bankrupt. 
                We refuse to believe that there are insufficient funds in 
                the great vaults of opportunity of this nation.</p>                 
        </section>
          <section class="st-panel st-color" id="st-panel-4">
            <div class="st-desc" data-icon="M"></div>
            <h2>java</h2>
            <p>But one hundred years later, the Negro still is not free.
                 One hundred years later, the life of the Negro is still
                  sadly crippled by the manacles of segregation and the
                   chains of discrimination.</p>                 
        </section>
        <section class="st-panel" id="st-panel-5">
            <div class="st-desc" data-icon="S"></div>
            <h2>asp.net</h2>
            <p>But we refuse to believe that the bank of justice is bankrupt. 
                We refuse to believe that there are insufficient funds in 
                the great vaults of opportunity of this nation.</p>                 
        </section>
        </div>
    </div>
</div>
</body>
</html>